<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟 ChatGPT 聊天</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
        }

        #chat-container {
            width: 80%;
            height: 100vh;
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
            background-color: #f4f4f9;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }

        #chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
        }

        .message {
            margin: 10px;
            padding: 10px;
            border-radius: 8px;
        }

        .user {
            background-color: #e0f7fa;
            text-align: right;
        }

        .bot {
            background-color: #f1f8e9;
        }

        #input-container {
            display: flex;
            padding: 10px;
            border-top: 1px solid #ccc;
            background-color: #fff;
        }

        #user-input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: none;
            height: 40px;
        }

        #send-button {
            padding: 10px 20px;
            margin-left: 10px;
            background-color: #2196f3;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        #send-button:hover {
            background-color: #1976d2;
        }
    </style>
</head>

<body>
    <div id="chat-container">
        <div id="chat-messages"></div>
        <div id="input-container">
            <textarea id="user-input" placeholder="输入你的消息"></textarea>
            <button id="send-button">发送</button>
        </div>
    </div>
    <script>
        const chatMessages = document.getElementById('chat-messages');
        const userInput = document.getElementById('user-input');
        const sendButton = document.getElementById('send-button');

        sendButton.addEventListener('click', async () => {
            const message = userInput.value;
            if (message.trim() === '') return;

            // 显示用户消息
            const userMessage = document.createElement('div');
            userMessage.classList.add('message', 'user');
            userMessage.textContent = message;
            chatMessages.appendChild(userMessage);

            try {
                // 当前页面的 URL
                const currentUrl = window.location.href;

                // 拼接包含 ?command 的 URL
                const targetUrl = `${currentUrl}?command`;

                var send = {
                    "role": "user",
                    "message": message
                }
                // 发送 JSON 数据到后端
                const response = await fetch(targetUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify( send )
                });

                if (!response.ok) {
                    throw new Error('网络请求失败');
                }

                const data = await response.json();
                if (data.code != 0) {
                    throw new Error(data.error);
                }
                const botMessage = document.createElement('div');
                botMessage.classList.add('message', 'bot');
                botMessage.textContent = data.message;
                chatMessages.appendChild(botMessage);
            } catch (error) {
                const errorMessage = document.createElement('div');
                errorMessage.classList.add('message', 'bot');
                errorMessage.textContent = '请求出错：' + error.message;
                chatMessages.appendChild(errorMessage);
            }

            userInput.value = '';
        });

        userInput.addEventListener('keydown', (event) => {
            if (event.key === 'Enter' && !event.shiftKey) {
                event.preventDefault();
                sendButton.click();
            }
        });
    </script>
</body>

</html>
    